<template>
  <div class="h-full qms_title">
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <div
      class="top-wrap"
      :class="isDarkMode(routeName) ? 'black_back' : 'white_back'"
    >
      <div class="left-wrap">
        <div>
          <span class="move-logo">{{ "" }}</span>
        </div>
      </div>

      <div class="center-wrap">
        <div class="title-msg">
          {{ title || "---" }}
        </div>
        <!-- <div class="title-con">PRODUCTION INFORMATION BOARD</div> -->
      </div>

      <div class="right-wrap">
        <div class="it-bg3">
          <div>
            <!-- <div class="nowTime">{{ nowWeek }}</div>
              <div class="nowDate">
                <span class="pr-[10px]">{{ classes }} </span>
                <span class="pr-[10px] text-[24px] lh-[18px]" v-show="showMonth"
                  >{{ nowMonth }}W
                </span>
                {{ nowDate }}
                {{ nowTime }}
              </div> -->
            <div class="nowTime">
              <span class="nowTime1">{{ nowDate }} {{ nowTime }}</span>
              <!-- {{ nowWeek }} -->
              <svg-icon
                :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
                class="ml-[15px] text-[24px] full_icon"
                @click="toggle"
              />

              <svg-icon
                icon-class="back"
                class="ml-[13px] text-[26px] full_icon"
                @click="goBack"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["deletePanelItemEvent"]);
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params } = toRefs(props);
// const { title, showMonth, classes, leftTitle } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

function goBack() {
  router.go(-1);
}

/**
 * vueUse 全屏
 */
const { isFullscreen, toggle } = useFullscreen();

onMounted(() => {
  if (isFullScreenFn()) {
    toggle();
  }
});

function isFullScreenFn() {
  return !!(
    document?.fullscreenElement || // 标准API
    document?.webkitFullscreenElement || // Chrome, Safari and Opera
    document?.mozFullScreenElement || // Firefox
    document?.msFullscreenElement
  );
}

const nowDate = ref();
const nowTime = ref();
const timer = ref();
const nowWeek = ref();
const nowMonth = ref();

timer.value = setInterval(() => {
  setNowTimes();
}, 0);

function setNowTimes() {
  let myDate = new Date();
  let wk = myDate.getDay();
  let yy = String(myDate.getFullYear());
  let mm = myDate.getMonth() + 1;
  let dd = String(
    myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
  );
  let hou = String(
    myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
  );
  let min = String(
    myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()
  );
  let sec = String(
    myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds()
  );
  let weeks = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  let week = weeks[wk];
  nowDate.value = yy + "-" + mm + "-" + dd + "";
  nowTime.value = hou + ":" + min + ":" + sec;
  nowWeek.value = week;

  let firstDayOfYear = new Date(myDate.getFullYear(), 0, 1);
  let daysSinceFirstDay = Math.floor(
    (myDate - firstDayOfYear) / (24 * 60 * 60 * 1000)
  );
  let currentWeekNumber = Math.ceil(
    (daysSinceFirstDay + firstDayOfYear.getDay() + 1) / 7
  );
  nowMonth.value = currentWeekNumber;
}

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.black_back {
  background-image: url(@/assets/images/screen/preview7.png);
  .title-msg {
    filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
      drop-shadow(rgb(95, 159, 255) 2px 1px 8px);
    color: #ffffff;
  }
  .move-logo {
    filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
      drop-shadow(#5f9fff 2px 1px 8px);
    color: #ffffff;
  }
  .nowTime {
    color: #ceeaff;
  }
  .nowDate {
    color: #ceeaff;
  }
  .full_icon {
    color: #ceeaff;
  }
}
.white_back {
  background-image: url(@/assets/images/login-bg.jpg);
  //   background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.15);
  .title-msg {
    color: #102474;
  }
  .nowDate {
    color: #102474;
    font-size: 18px !important;
  }
  .nowTime {
    color: #102474;
    font-size: 18px !important;
  }
  .full_icon {
    color: #102474;
    font-size: 18px !important;
  }
}
.top-wrap {
  display: flex;
  justify-content: space-between;
  //   justify-content: space-around;
  margin: 0px;
  min-width: 100%;
  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  // background: linear-gradient(0deg, #111825, #151E29);

  .left-wrap {
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .move-logo {
      font-size: 32px;
      font-family: "DINPro";
      font-weight: bold;

      letter-spacing: 2px;

      margin-top: 20px;
      display: block;
    }
  }

  .center-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title-msg {
      font-size: 36px;
      font-family: YOUSHE;
      //   font-weight: bold;
      //   color: #ffffff;
      letter-spacing: 2px;
    }

    .title-con {
      font-size: 12px;
      font-family: DINPro;
      font-weight: normal;
      color: #ffffff;
      margin-top: 4px;
      letter-spacing: 1px;
      filter: drop-shadow(rgba(59, 59, 59, 0.66) 1px 1px 6px)
        drop-shadow(#5f9fff 2px 1px 8px);
    }
  }

  .right-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    .it-bg3 {
      padding: 12px 10px;
      text-align: center;
      //   width: 113px;
      // height: 41px;
      margin-right: 20px;
    }

    .nowTime {
      font-size: 22px;
      // font-family: Source Han Sans CN;
      font-family: DINPro;
      font-weight: bold;
      //   color: #ceeaff;
      text-align: center;
    }

    .nowDate {
      margin-top: 5px;
      font-size: 16px;
      font-family: DINPro;
      // font-family: Source Han Sans CN;
      font-weight: bold;
      //   color: #ceeaff;
      text-align: center;
    }
  }
}
</style>
